<template>
    <div class="firstdemo">
        <button type="button" @click="loginEVt" class="btn btn-large btn-block btn-danger">button</button>
        <button type="button" @click="threeEVt" class="btn btn-large btn-block btn-danger">threejs</button>
        <button type="button" @click="clockEVt" class="btn btn-large btn-block btn-danger">clock</button>
        <button type="button" @click="firstEVt" class="btn btn-large btn-block btn-danger">threejs</button>
        <button @click="psEvt">子父传值</button>
    </div>
    <div class="tc">
        <div class="box">
            <div>1</div>
            <div>1</div>
            <div>1</div>
            <div>1</div>
        </div>
    </div>
    <div class="clearfix"></div>
    <!-- 动态绑定class -->
    <div :class="{'left-right':active_}"></div>
    <img src="" alt="这是yizhangtupian">
    <div class="p">
        <div class="s">3</div>
    </div>

</template>

<script setup>
import { router } from '../../route';
import { onMounted, ref } from 'vue';
import { useCommonStore } from '../../store/index'

const store = useCommonStore()
const de = ref('1')
const active_ = ref(true)

// 挂载时将token设置为空保证返回到login页面时没有token使得浏览器返回到登录页面时不会在回到其他页面
onMounted(()=> {
   store.setToken('')
})

function loginEVt(){
    store.setNum(de)
    store.setToken('12345678')
    store.setUserInfo({
        'name': 'li',
        'sex':'man'
    })
    router.push('/home')

}
function threeEVt(){
    router.push('/three')
}
function clockEVt(){
    router.push('/clock')
}
function firstEVt(){
    router.push('/f3d')
}

function psEvt(){
    router.push('/parent')
}

</script>


<style lang="less" scoped>

// 通过transfrom 来设置水平距离和垂直距离也可实现居中
// .left-right{
//     width: 100px;
//     height: 50px;
//     background-color: yellowgreen;
//     transform: translate(10px,100px);
// }


// 
// 两个元素同时设置margin-top会取最大值，为防止这种情况（盒子塌陷）给父级盒子添加border
.p{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 30px;
    border: 1px solid blue;


}
.s{
    margin: 20px;
}

.left-right{
    width: 100px;
    height: 50px;
    background-color: yellowgreen;
    // 垂直居中并缩小0.5倍，scale大于1表示放大小于1表示缩小，rotate旋转角度
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.5) rotate(50deg);

    // ????????
    transition: width .5s ease 1s ;
}
.left-right:hover{
    width: 150px;
}

.tc{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    float: left;

   .box{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 20px;
        left: 45px;

        div:nth-child(1){
        position: absolute;
        left: 0px;
        background-color: white;
        }
        div:nth-child(2){
            position: absolute;
            top: 20px;
            left: 20px;
            
            background-color: white;

        }
        div:nth-child(3){
            position: absolute;
            top: 40px;
            background-color: white;
            // left: 20px;
        }
        div:nth-child(4){
            position: absolute;
            background-color: white;
            top: 20px;
            left: -20px;
        }
   }
   
}
// .tc浮动给下一个元素设置clearfix
.clearfix:after{
        content: '';
        display: block;
        clear: both;
        // height: 0;
        visibility: hidden;//隐藏该元素，它所占据的空间位置仍然存在，不会从渲染树删除
    }

</style>
